<template>
  <div class="footbar">
    <div class="layout-footer">
      <div class="container clearfix">
        <ul class="about-us col-sm-5">
          <h4>关于我们</h4>
          <p>Flyme Design
            是一个综合规范，工具，学术文章一体的网站，主要面向Flyme内部员工使用，于2016年建站，以聚合开发内容、提高沟通效率为导向。可以查看系统规范，下载图标，查看开发SDK，下载工具等功能。</p>
          <a href="#">联系我们</a>
          <a href="#">意见反馈</a>
        </ul>
        <ul class="website-map col-sm-2">
          <h4>网站地图</h4>
          <li><a href="standard.html">规范</a></li>
          <li><a href="article.html">干货</a></li>
          <li><a href="tools.html">工具</a></li>
          <li><a href="personal.html">个人中心</a></li>
        </ul>
        <ul class="friend-link col-sm-3">
          <h4>友情链接</h4>
          <ul class="friend-link-left col-sm-6">
            <li><a href="http://www.meizu.com/" target="_blank">魅族官网</a></li>
            <li><a href="http://app.flyme.cn/" target="_blank">应用商店</a></li>
            <li><a href="http://www.flyme.cn/blog/" target="_blank">FRDC博客</a></li>
            <li><a href="http://e.meizu.com/" target="_blank">广告媒体平台</a></li>
          </ul>

          <ul class="friend-link-right col-sm-6">
            <li><a href="http://www.flyme.cn/" target="_blank">Flyme官网</a></li>
            <li><a href="http://open.flyme.cn/?t=1488629988904" target="_blank">开放平台</a></li>
            <li><a href="http://e.flyme.cn/views/index.html" target="_blank">Flyme推广平台</a></li>
          </ul>
        </ul>
        <ul class="fd-code col-sm-2">
          <img src="../assets/flyme-design-er.png">
        </ul>
      </div>
    </div>

    <footer class="fd-footer">
      ©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.
    </footer>
    <div class="fd-gotop">
      <div class="go-top">
        <span class="glyphicon glyphicon-chevron-up"></span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'footbar',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .layout-footer {
    width: 100%;
    color: #666;
    font-size: 12px;
    background-color: #fff;
    overflow: hidden;
    padding: 40px 0;
  }

  .layout-footer h4 {
    font-family: sc-bold,"Microsoft YaHei";
    color: #000;
    border-left: 3px solid #039be5;
    padding-left: 6px;
    box-sizing: border-box;
  }

  .about-us {
    float: left;
    padding-left: 0;
  }

  .about-us a:hover {
    color: #387aff;
  }

  .about-us p {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 1.2px;
  }

  .about-us a {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 1.2px;
    margin-right: 20px;
  }

  .website-map {
    float: left;
  }

  .friend-link, .friend-link-left, .friend-link-right {
    float: left;
    padding: 0;
  }

  .fd-code {
    float: left;
    padding-right: 0;
  }

  .fd-code img {
    width: 100%;
    height: 100%;
  }

  .website-map li a, .friend-link li a {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 1.2px;
  }

  .website-map li a:hover, .friend-link li a:hover {
    color: #387aff;
  }

  .fd-footer {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #fff;
    position: relative;
    bottom: 0;
    border-top: 1px solid #BBBBBB;
  }

  .fd-gotop {
    display: none;
    position: fixed;
    bottom: 150px;
    right: 50px;
    top: auto;
    cursor: pointer;
    z-index: 9999;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
  }

  .fd-gotop .go-top {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(180, 180, 180, .8);
    border-radius: 25px;
  }

  .fd-gotop .go-top:hover {
    opacity: .8;
    background-color: #198ded;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
  }

  .fd-gotop .go-top:hover .glyphicon-chevron-up {
    color: #fff
  }

  .fd-gotop .go-top .glyphicon-chevron-up {
    font-size: 18px;
    color: #fff;
  }

  @media screen and (max-width: 768px) {
    .fd-gotop {
      opacity: 0;
    }

    .fd-footer {
      width: 100%;
      height: 40px;
      font-size: 10px;
      line-height: 40px;
      text-align: center;
      background: #fff;
      position: relative;
      bottom: 0;
    }

  }
</style>
